<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import { routesList } from '@/router/index'
import { ref } from 'vue'

const routeList = ref<any>(routesList)
</script>

<template>
  <header>
    <div class="wrapper">
      <nav>
        <RouterLink v-for="item in routeList" :key="item.name" :to="{ path: item.path }">{{
          item.title || item.name
        }}</RouterLink>
      </nav>
      <hr />
      <!-- <nav>
        <RouterLink to="/">首页</RouterLink>
        <RouterLink to="/studemo1">选项式API</RouterLink>
        <RouterLink to="/studemo2">组合式API</RouterLink>
        <RouterLink to="/studemo3">组合式API-自定义渲染-返回函数</RouterLink>
        <RouterLink to="/studemo4">组合式API-自定义渲染-JSX</RouterLink>
        <RouterLink to="/studemo5">setup 语法糖</RouterLink>
        <RouterLink to="/studemo6">setup 语法糖（ts）</RouterLink>
        <RouterLink to="/studemo21">模板语法-文本</RouterLink>
        <RouterLink to="/studemo22">模板语法-属性</RouterLink>
        <RouterLink to="/studemo23">内置指令</RouterLink>
        <RouterLink to="/studemo24">绑定 HTML class</RouterLink>
        <RouterLink to="/studemo25">绑定内联样式 Style</RouterLink>
        <RouterLink to="/studemo31">声明响应式状态 ref & reactive</RouterLink>
        <RouterLink to="/studemo32">Reactive包装注意事项</RouterLink>
        <RouterLink to="/studemo33">reactive() 的局限性</RouterLink>
        <RouterLink to="/studemo34">额外的 ref 解包细节</RouterLink>
        <RouterLink to="/studemo35">响应式 API:工具函数</RouterLink>
        <RouterLink to="/studemo36">shallowReactive() & shallowReadonly()</RouterLink>
        <RouterLink to="/studemo37">shallowRef() & triggerRef()</RouterLink>
        <RouterLink to="/studemo38">toRaw() & unref() & markRaw()</RouterLink>
        <RouterLink to="/studemo39">customRef()</RouterLink>
        <RouterLink to="/studemo310"
          >effectScope() & getCurrentScope() & onScopeDispose() 案例1</RouterLink
        >
        <RouterLink to="/studemo311"
          >effectScope() & getCurrentScope() & onScopeDispose()案例2</RouterLink
        >
        <RouterLink to="/studemo312"
          >effectScope() & getCurrentScope() & onScopeDispose()案例3</RouterLink
        >
        <RouterLink to="/studemo313"> 计算属性 </RouterLink>
        <RouterLink to="/studemo314"> 侦听器1 </RouterLink>
        <RouterLink to="/studemo315">侦听数据源类型</RouterLink>
        <RouterLink to="/studemo316"> 侦听器 watchEffect</RouterLink>
        <RouterLink to="/studemo317"> 侦听器 副作用清理</RouterLink>
        <RouterLink to="/studemo41"> 组件注册和引入 </RouterLink>
        <RouterLink to="/studemo42"> 组件传值 props </RouterLink>
        <RouterLink to="/studemo43"> 组件事件 emit </RouterLink>
        <RouterLink to="/studemo44"> 插槽 Slots </RouterLink>
        <RouterLink to="/studemo45"> 插槽列表演示 </RouterLink>
        <RouterLink to="/studemo46"> 组合式 API：生命周期钩子 </RouterLink>
        <RouterLink to="/studemo47"> 组件 v-model </RouterLink>
        <RouterLink to="/studemo48"> 组合式函数 </RouterLink>

        <RouterLink to="/stduydemo1"> 案例-学生成绩管理系统 </RouterLink>
        <RouterLink to="/stduydemo2"> 案例-学生成绩管理系统2 </RouterLink>
        <RouterLink to="/stduydemo3">
          案例-学生成绩管理系统3(访问模板引用ref&组件暴漏defineExpose())
        </RouterLink>

        <RouterLink to="/mytest1"> 测试案例- test1 </RouterLink>
        <RouterLink to="/mytest2"> 测试案例- test2 </RouterLink>

        <RouterLink to="/mystudy1"> 练习1 </RouterLink>
        <RouterLink to="/mystudy2"> 练习2 </RouterLink>
        <RouterLink to="/mystudy3"> 练习3 </RouterLink>
        <RouterLink to="/mystudy4"> 练习4 </RouterLink>
        <RouterLink to="/mystudy5"> 练习5 </RouterLink>
        <RouterLink to="/mystudy6"> 练习6 </RouterLink>
        <RouterLink to="/mystudy7"> 练习7 </RouterLink>
        
        
        <RouterLink to="/studemo"> 测试 </RouterLink>        
        <RouterLink to="/studemo1"> 测试1</RouterLink>        

      </nav> -->
      <router-link to="/srdemo1">srdemo1路由</router-link>
      <router-link to="/srdemo1/detail1">srdemo1嵌套路由 detail1</router-link>

      <router-link
        :to="{
          //name:'xiang1', //用name也可以跳转
          path: '/srdemo1/detail1',
          query: {
            id: 1,
            title: '新闻标题',
            content: '内容'
          }
        }"
      >
        query 传参
      </router-link>

      <router-link
        :to="{
          name: 'xiang2',
          params: {
            title: '新闻标题',
            content: '内容'
          }
        }"
      >
        params 传参
      </router-link>
    </div>
  </header>

  <RouterView />
</template>

<style scoped lang="scss">
header {
  border-bottom: 1px solid var(--color-border2);
  padding: 10px 0;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;

  a {
    display: inline-block;
    padding: 0 1rem;
    border-left: 1px solid var(--color-border);
    color: blue;
    margin: 5px 0;
  }
}
</style>
